<!--
 * @FileDescription: 系统首页
 * @Author: 周沿江
 * @Date: 2021/6/25
 * @LastEditors: 周沿江
 -->
<template>
  <div>
    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :span="6">
        <el-card :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-1">
            <i class="el-icon-lx-record grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ title.user }}</div>
              <div>用户数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-2">
            <i class="el-icon-data-analysis grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ title.device }}</div>
              <div>设备数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-4">
            <i class="el-icon-lx-file grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ title.task }}</div>
              <div>检测数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-3">
            <i class="el-icon-lx-warn grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">0</div>
              <div>高危设备数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-top: 10px">
      <el-card>
        <el-col :span="10">
          <el-calendar v-model="value" class="el-calendar-table">
            <template slot="dateCell" slot-scope="{ date, data }">
              <h6 style="font-size: 13px;margin:0 0 0 0 ;text-align: center" class="title-background">
                {{ data.day.split('-').slice(1).join('-') }}</h6>
              <a v-for="status in log_status">
                <div v-if="status.status =='warning' && data.day==status.date" style="width: 100%;height: 80%"
                     class="warning-background">

                  <div style="height: 7px"></div>
                  <h5 class="warning-font" style="font-size: 13px;text-align: center;font-weight: bolder">检查了
                    {{ status.count }} 次</h5>
                </div>
                <div v-if="status.status =='danger' && data.day==status.date" style="width: 100%;height: 80%"
                     class="danger-background">
                  <div style="height: 7px"></div>
                </div>
              </a>


            </template>
          </el-calendar>


        </el-col>

        <el-col :span="14">

          <el-tabs v-model="message">
            <el-tab-pane :label="`检测项(${task_list.length})`" name="first">
              <el-table :data="task_list" :show-header="false" style="width: 100%" height="464">
                <el-table-column prop="date" width="180"></el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <span class="message-title">{{ scope.row.deviceId }}</span>
                  </template>
                </el-table-column>


              </el-table>

            </el-tab-pane>


          </el-tabs>
        </el-col>
      </el-card>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'dashboard',
  data() {
    return {
      value: '',
      title: {},
      task_list: [],
      name: localStorage.getItem('username'),
      message: 'first',
      showHeader: false,
      begin_time: '2021-05-18 12:32:12',
      log_status: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
    })
  },
  methods: {
    /**
     * title初始化
     * @returns {Promise<void>}
     */
    async init_title() {
      [this.title['user'], this.title['device'], this.title['task']] = await Promise.all([this.$http.get('/user/count'), this.$http.get('/device/count'), this.$http.get('/task/count')])
      console.log(this.title['user'])
    },
    /**
     * 日历和内容初始化
     * @returns {Promise<void>}
     */
    async init() {
      var data = await this.$http.get('/task/selectAll');
      this.task_list = data
      console.log(this.task_list.length)
      for (var i = 0; i < this.task_list.length; i++) {
        var date = this.task_list[i].date
        var da = date.split(" ")[0]
        var flag = true
        for (var j = 0; j < this.log_status.length; j++) {
          if (this.log_status[j].date == da) {
            this.log_status[j]['count'] = this.log_status[j]['count'] + 1
            flag = false
          }
        }
        if (flag) {
          this.log_status.push({"date": da, "status": "warning", "count": 1})
        }

      }
    },
  },
  created() {
    this.init();
    this.init_title()
  }
};
</script>


<style scoped>
@font-face {
  font-family: "DS-DIGIT";
  src: url("../../assets/fonts/digit/DS-DIGIT.woff2") format("woff2"),
    /*url("../../assets/fonts/digit/DS-DIGIT.woff") format("woff"),*/ url("../../assets/fonts/digit/DS-DIGIT.ttf") format("truetype"),
  url("../../assets/fonts/digit/DS-DIGIT.eot") format("embedded-opentype");
  /*url("../../assets/fonts/digit/DS-DIGIT.svg") format("svg");*/
}

.el-calendar-table /deep/ .el-calendar-day {
  height: 70px;
  padding: 0;
}

.el-calendar-table /deep/ .el-calendar__header {
  height: 40px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  width: 100px;
  height: 100px;
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.grid-con-4 .grid-con-icon {
  background: #909399;
}

.grid-con-4 .grid-num {
  color: #909399;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.success /deep/ .el-card__header {
  background-color: #f0f9eb;
}

.info /deep/ .el-card__header {
  background-color: #e9e9eb;
}

.danger /deep/ .el-card__header {
  background-color: #fde2e2;
}

.warning /deep/ .el-card__header {
  background-color: #faecd8;
}

.success-font {
  color: rgba(103, 194, 58, 0.5);
}

.info-font {
  color: rgba(144, 147, 153, 0.5);
}

.warning-font {
  color: rgba(230, 162, 60, 1);
}

.danger-font {
  color: rgba(245, 108, 108, 0.99);
}

.title-background {
  background-color: #f4f4f5 !important;
}

.warning-background {
  background-color: #faecd8 !important;
  padding: 0 !important;
}

.danger-background {
  background-color: #fde2e2 !important;
}
</style>
